import React from 'react';

export type BadgeVariant = 'dark' | 'outlined' | 'accent' | 'light';

interface BadgeProps {
  variant?: BadgeVariant;
  children: React.ReactNode;
  className?: string;
}

export function Badge({ variant = 'dark', children, className = '' }: BadgeProps) {
  const baseStyles = "font-['Geist_Mono'] font-normal text-[12px] tracking-[1.56px] uppercase px-[10px] py-[4px] rounded-[4px] w-fit";
  
  const variantStyles = {
    dark: "bg-[#2c2c2c] text-[#faf1e9]",
    outlined: "border border-[#a1a1a1] text-[#2c2c2c]",
    accent: "border border-[#edc29c] text-[#edc29c]",
    light: "backdrop-blur-[50px] border border-[#faf1e9] text-[#faf1e9]",
  };
  
  return (
    <div className={`${baseStyles} ${variantStyles[variant]} ${className}`}>
      {children}
    </div>
  );
}